var DURATION_1 = 500;
var DURATION_2 = 1000;
var DURATION_3 = 1500;
var hgFontGap = 110;
var S_NORMAL = 0;
var S_DETAIL = 1;

var session = (function() {
  var status = -1;
  var currentIndex = -1;

  var statusChanged = function(s) {
    if (s == S_NORMAL) {
      $('#detailsMaskCont').unbind('click');
      for (var i = 0; i < 8; i++) {
        $('[id=hf' + i + ']').bind('mouseenter', {
          index: i
        }, fontMouseOverHandler).bind('mouseleave', {
          index: i
        }, fontMouseOutHandler);
      }

      $('#hfCont').stop().animate({
        opacity: 1
      }, {
        duration: DURATION_1,
        queue: false
      });

      $('#hf0').bind('click', {
        index: 0,
        titleString: 'GREETING',
        htmlLink: 'greeting.html'
      }, showDetailsCont);
      $('#hf1').bind('click', {
        index: 1,
        titleString: 'PROGRAMMER',
        htmlLink: 'programmer.html'
      }, showDetailsCont);
      $('#hf3').bind('click', {
        index: 3,
        titleString: 'OPEN SOURCE',
        htmlLink: 'opensource.html'
      }, showDetailsCont);
      $('#hf4').bind('click', {
        index: 4,
        titleString: 'HISTORY'
      }, showDetailsCont);
      $('#hf5').bind('click', {
        index: 5,
        titleString: 'BLOG'
      }, showDetailsCont);
      $('#hf7').bind('click', {
        index: 7,
        titleString: 'ABOUT'
      }, showDetailsCont);
    } else if (s == S_DETAIL) {
      $('.hugeFont').unbind('click');
      $('#hfCont').stop().animate({
        opacity: 0.3
      }, {
        duration: DURATION_1,
        queue: false
      });
    }
  };
  var currentIndexChanged = function(index) {
    var tar = $('#hf' + index + ',#hf' + index + 'sf');
    var otherTarArr = new Array();
    for (var i = 0; i < 8; i++) {
      if (i != index) {
        otherTarArr.push('#hf' + i);
      }
    }
    var otherTar = $(otherTarArr.join(','));
    var smallTar = $('#hf' + index + 'sf .smallFont');
    otherTar.stop().animate({
      opacity: 0.3
    }, {
      duration: 500,
      queue: false
    });
    smallTar.css('color', '#F19733').stop().animate({
      opacity: 1
    }, {
      duration: DURATION_1,
      queuq: false
    });
    tar.css('color', '#F19733').stop().animate({
      opacity: 1
    }, {
      duration: DURATION_1,
      queue: false
    });
  };

  var currentIndexReset = function(index) {
    $('.smallFont').stop().css('color', '#CCCCCC').animate({
      opacity: 0.3
    }, {
      duration: DURATION_1,
      queue: false
    });
    $('.hugeFont').stop().css('color', '#CCCCCC').animate({
      opacity: 1
    }, {
      duration: 500,
      queue: false
    });
  };

  return {
    setStatus: function(s) {
      if (status != s) {
        status = s;
        statusChanged(s);
      }
    },
    getStatus: function() {
      return status;
    },
    setCurrentIndex: function(i) {
      if (currentIndex != i) {
        currentIndex = i;
        if (currentIndex == -1) {
          currentIndexReset();
        } else {
          currentIndexChanged(i);
        }
      }
    },
    getCurrentIndex: function() {
      return currentIndex;
    },
  };
})();

function getCenterPoint() {
  var doc = $(window);
  var w = doc.width();
  var h = doc.height();
  return {
    x: Math.max(w, 1002) / 2,
    y: Math.max(h, 600) / 2 - 210
  };
}

$(document).ready(function() {
  init();
});

$(window).resize(function() {
  browserResize();
});

function init() {
  var centerLeftX = getCenterPoint().x - 110 * 4;
  $('.hugeFont').css('top', getCenterPoint().y + 'px').each(function(index) {
    $(this).css('left', centerLeftX + 110 * index + 'px');
  });


  $('#hf7').css('left', '-120px').animate({
    left: (centerLeftX + 110 * 7) + 'px',
    opacity: 1
  }, {
    duration: 2000,
    complete: function() {
      $('.hugeFont').animate({
        opacity: 1
      }, {
        duration: 2000,
        complete: initAfterAnimate
      });
    }
  });
}

function browserResize() {
  var centerLeftX = getCenterPoint().x - 110 * 4;

  $('.hugeFont').css('top', getCenterPoint().y + 'px').each(function(index) {
    $(this).css('left', centerLeftX + 110 * index + 'px');
  });

  $('.hugeFont').css('top', getCenterPoint().y + 'px');
  alignSmallFont();
}

function alignSmallFont() {
  var thf0 = $('#hf0');
  var l = parseInt(thf0.css('left'));
  var t = parseInt(thf0.css('top')) + thf0.height() - 55;

  if (isWindows()) {
    t += 15;
  }
  $('#hf0sf').css('left', l + 'px').css('top', (t - 7) + 'px');

  var ll = l + hgFontGap;
  var tt = t - 185;
  $('#hf1sf').css('left', ll + 'px').css('top', (tt - 3) + 'px');

  var l3 = l + hgFontGap * 3;
  var t3 = t - 340;
  $('#hf3sf').css('left', l3 + 'px').css('top', (t3 + 2) + 'px');

  var l4 = l + hgFontGap * 4;
  var t4 = t - 237;
  $('#hf4sf').css('left', l4 + 'px').css('top', t4 + 'px');

  var l5 = l + hgFontGap * 5;
  var t5 = t - 233;
  $('#hf5sf').css('left', l5 + 'px').css('top', (t5) + 'px');

  var l7 = l + hgFontGap * 7;
  var t7 = t - 6;
  $('#hf7sf').css('left', l7 + 'px').css('top', t7 + 'px');
}

function initAfterAnimate() {
  session.setStatus(S_NORMAL);

  alignSmallFont();

  $('.smallFontCont').animate({
    opacity: 1
  }, {
    duration: 500
  });
}

function fontMouseOverHandler(event) {
  if (session.getStatus() == S_DETAIL) {
    return;
  }
  var index = event.data.index;
  l('mouse over triggered >> ' + index);
  session.setCurrentIndex(index);
}

function fontMouseOutHandler(event) {
  if (session.getStatus() == S_DETAIL) {
    return;
  }
  l('mouse out  triggered >> ' + session.getCurrentIndex());
  session.setCurrentIndex(-1);
}

function showDetailsCont(event) {
  var titleString = event.data.titleString;
  var htmlLink = event.data.htmlLink;
  session.setCurrentIndex(event.data.index);
  session.setStatus(S_DETAIL);
  if (titleString == 'GREETING') {
    // greetingInit();
  } else if (titleString == 'PROGRAMMER') {
    // programmerInit();
  } else if (titleString == 'OPEN SOURCE') {
    // openInit();

  } else if (titleString == 'HISTORY') {
    // historyInit();
  } else if (titleString == 'BLOG') {
    window.location.href = '/blog';
  } else if (titleString == 'ABOUT') {
    // aboutInit();
  }

  $('#details_cont').empty();

  $.ajax({
    url: htmlLink,
    method: 'GET',
    dataType: 'html',
    success: showDetailsContSuccess,
    error: showDetailsContError
  });
  $('#maskCont').removeClass('hide');
  $('#maskCont').bind('click', hideDetailsCont);
}

function showDetailsContSuccess(data) {
  $('#details_cont').html(data);
}

function showDetailsContError(xhr, status, message) {

}

function hideDetailsCont(event) {
  if ($(event.target).attr('id') != 'maskCont') {
    return;
  }
  $('#maskCont').unbind('click', hideDetailsCont);
  $('#maskCont').addClass('hide');
  $('.detailsCont').addClass('hide');
  session.setStatus(S_NORMAL);
  session.setCurrentIndex(-1);
}

function greetingInit() {
  var centerLeftX = getCenterPoint().x - 110 * 3;
  $('#greetingCont').removeClass('hide')
    .css('top', getCenterPoint().y + 'px')
    .css('left', centerLeftX + 'px');
}

function programmerInit() {
  var l = getCenterPoint().x - 110 * 2;
  $('#programmerCont').removeClass('hide')
    .css('top', getCenterPoint().y + 'px')
    .css('left', l + 'px');
}

function historyInit() {
  var l = getCenterPoint().x - 110 * 1;
  $('#historyCont').removeClass('hide')
    .css('top', getCenterPoint().y + 'px')
    .css('left', l + 'px');
}

function openInit() {
  var l = getCenterPoint().x;

  $('#openCont').removeClass('hide')
    .css('top', (getCenterPoint().y - 70) + 'px')
    .css('left', l + 'px');
}

function aboutInit() {
  var l = getCenterPoint().x - 110 * 3;
  $('#aboutCont').removeClass('hide')
    .css('top', (getCenterPoint().y - 70) + 'px')
    .css('left', l + 'px');

  mapInit('aboutMap');
}

var aboutMap;

function mapInit(contIdStr) {
  $('#aboutCont').bind('click', hideDetailsCont);

  if (aboutMap) {
    return;
  }

  $.ajax({
    url: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDHaJXaLRVfe-3JHZrtU8RWyYkoh2p2FLk&sensor=true',
    dataType: 'text',
    success: function() {
      var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(31.22196, 121.54472),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      aboutMap = new google.maps.Map(document.getElementById(contIdStr),
        mapOptions);
    },
  });
}
